<template>
  <div class="citys" ref="left">
    <section>
      <div class="city-title" id="locate">定位城市</div>
      <div class="city-list city-list-inline clearfix">
        <div class="location-city">
          <!-- 定位失败，请稍后重试 -->
          广州
        </div>
      </div>
    </section>
    <section class="history-city-list">
      <div class="city-title" id="history">最近访问城市</div>
      <div class="city-list city-list-inline clearfix">
        <div
          class="city-item"
          v-for="(item, index) in hsCitys.slice(0, 3)"
          :key="index"
          @click="selectHs(item.id, item.name)"
        >
          {{ item.name }}
        </div>
      </div>
    </section>
    <section>
      <div class="city-title" id="hot">热门城市</div>
      <div class="city-list city-list-inline clearfix">
        <div
          class="city-item"
          v-for="(item, index) in HotCity"
          :key="index"
          @click="checkHot(item)"
        >
          {{ item }}
        </div>
      </div>
    </section>
    <section>
      <div v-for="(item, index) in Citylists" :key="index">
        <div :id="item.letter" class="city-title city-title-letter">
          {{ item.letter }}
        </div>
        <div class="city-list city-list-block clearfix">
          <div
            class="city-item"
            v-for="(c, i) in item.citys"
            :key="i"
            @click="selectCity(c.id, c.nm)"
          >
            {{ c.nm }}
          </div>
        </div>
      </div>
    </section>
    <section class="nav">
      <a href="#locate" class="nav-item">定位</a>
      <a href="#history" class="nav-item">最近</a>
      <a href="#hot" class="nav-item">热门</a>
      <a
        :href="'#' + item.letter"
        class="nav-letter nav-item"
        v-for="(item, index) in Citylists"
        :key="index"
        >{{ item.letter }}</a
      >
    </section>
  </div>
</template>

<script>
import {getCitysLists} from '../api/home.js'
import { ref } from "vue"
import { useRouter } from "vue-router";
    export default {
       setup() {
        const router=useRouter()
        let  Citylists=ref(null)//城市列表
        let  HotCity=ref(null)//热门城市
        let  str=ref('ABCDEFGHIJKLMNOPQRSTUVWXYZ')
        let  allCitys=ref(null)
        let hsCitys=ref([])//最近访问
         // 获取城市列表数据
          let  getCitysFun=()=>{
                getCitysLists().then(data=>{
                    allCitys.value=data.cts
                    HotCity.value = data.hot
                    parseCity(data.cts)
                })
            }
            //整理城市数据
          let parseCity=(arr)=> {
                let newStr =str.value.split("")
                let cityArr = []
                let newCity = []
                for (let i = 0; i < newStr.length; i++) {
                    cityArr.push({
                        letter: newStr[i],
                        citys: []
                    })

                }
                for (let i = 0; i < arr.length; i++) {
                    for (var j = 0; j < cityArr.length; j++) {
                        if (arr[i].py[0].toUpperCase() == cityArr[j].letter) {
                            cityArr[j].citys.push(arr[i])
                        }
                    }
                }
                cityArr.forEach(function (item) {
                    if (item.citys.length != 0) {
                        newCity.push(item)
                    }
                })
                Citylists.value = newCity
                return newCity;
            }
            //最近访问
           let selectHs=(id,name)=>{
                if (hsCitys.value.length) {
                    let index = hsCitys.value.findIndex(item=>item.id==id)
                    if (index==-1) {
                        hsCitys.value.push({id,name})
                         window.localStorage.setItem('hsCitys',JSON.stringify(hsCitys.value))                      
                    }
                }
                router.push({path:"/home",query:{id,name}})
            }
            // 热门城市
           let  checkHot=(name)=>{
                Citylists.value.forEach(item=>{
                    let index = item.citys.findIndex(c=>c.nm==name)
                    if (item.citys[index]!=undefined) {
                         router.push({path:"/home",query:{id:item.citys[index].id,name}})                    
                    }
                })
            }
            //选择城市
           let selectCity=(id,name)=>{
                 if (hsCitys.value.length) {
                    let index = hsCitys.value.findIndex(item=>item.id==id)
                    if (index==-1) {
                        hsCitys.value.push({id,name})
                         window.localStorage.setItem('hsCitys',JSON.stringify(hsCitys.value))                      
                    }
                }
                router.push({path:"/home",query:{id,name}})
            }
             getCitysFun()
            let temp = JSON.parse(window.localStorage.getItem("hsCitys"))
            hsCitys.value = temp==null?[]:temp.reverse()


         return {
                Citylists,
                HotCity,
                str,
                allCitys,
                hsCitys,
                getCitysFun,
                parseCity,
                selectHs,
                checkHot,
                selectCity,
            };
       }
    }
</script>

<style lang="less" scoped>
.citys {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
  background-color: #ebebeb;
  font-size: 14px;
  overflow-y: scroll;

  .city-list-inline {
    background-color: #f5f5f5;
    padding-bottom: 8px;

    .location-city {
      width: auto;
      min-width: 30%;
      padding: 0 20px;
    }
  }
  .nav {
    position: fixed;
    top: 75px;
    top: 11vh;
    right: 0;
    width: 35px;
    z-index: 10;
    text-align: center;
    font-size: 12px;

    .nav-item {
      display: block;
      height: 2.8vh;
    }
    .nav-letter {
      width: 15px;
      margin-left: 15px;
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>